Chapter 17

Using Client-Side Image Maps-the Easy Way

CONTENTS

Image maps are popular, despite the bandwidth they waste and the time they take to load. Users like using them and Web page designers like designing them-perhaps because image maps are one of the few elements of a Web page that truly distinguish the Web from other media.

Why use client-side image maps? Using client-side image maps means you don't have to create a server-side script and program in CGI. All the processing work is done at the browser; to the server, a page with client-side image maps is just another HTML page. Server-side image maps can operate only by sending a special message to the server that is then interpreted by the image map script file. Only then is the correct page dispatched from the server. As a result, tasks such as displaying varying text when a mouse passes over each area of a map are not possible without client-side scripting.

The client-side image map example I use in this chapter would not usually see the light of day on my computer, because the graphic I use is 27KB-huge in comparison to my usual mean, sub-10KB images. Regardless, client-side image maps are fun to work with, and the one I use in this chapter is also an example of two-dimensional HTML using the HTML layout control. The text box that displays a message as the mouse passes over the image actually sits on top of the image itself. More astute designers can take this concept further and make the message appear to be part of the image.

Creating a Clickable Image

The following example uses an HTML layout to hold the image and handle the mouse events that give the image map its functionality:

  1. First, open the ActiveX Control Pad and select New HTML Layout from the File menu.
  2. When the new layout appears, resize it to almost fill the client area of the layout control.
  3. You use an ISImage control to hold the image, so click the ISImage icon on the tool box and then click anywhere on the canvas of the layout to add the image control.
  4. To add the actual graphic image to the control, you simply set the PicturePath property, as shown in Figure 17.1. You can find the graphic for this example, truck.gif, on the CD-ROM.
    Figure 17.1 : The .gif placed in the Image control via the PicturePath property.

Note
When you develop layouts that include graphics such as truck.gif, you need to specify an absolute path for the graphic. However when you are ready to put the page, the .ALX HTML layout file, and the graphic online, you can edit the PicturePath property from the source of the .ALX file to make it a relative path on the server.

  1. Now you can add the text box control that displays a short description of the linked file to the user. Using the Properties window, which you access from the Control Menu (by right-clicking the control), set the following properties (see Figure 17.2):
    Figure 17.2 : Setting the properties for the layout.
    MultiLine      True
    Font                    12 pt. Bold
    ForeColor      A shade of orange
  2. Save the layout as truck.alx.

The next stage is to work out which parts of the image are clickable and act as hyperlinks to other pages in the Web site.

Determining Areas Within an Image Map

When dealing with image maps in VBScript, you use rectangles to determine the clickable areas. You specify the virtual rectangles with two coordinates, representing the top, left corner and bottom, right corner.

The two coordinates are known as X1,Y1 and X2,Y2. X is the horizontal axis, and Y is the vertical axis; both axes have their origins in the top, left corner of the screen.

Therefore, you need to specify four values for each clickable area: X1, Y1, X2, and Y2. X1 is the number of pixels from the left side of the layout to the left edge of the clickable area. X2 is the number of pixels from the left side of the layout to the right edge of the clickable area. Y1 is the number of pixels from the top edge of the layout to the top edge of the clickable area. And finally, Y2 is the number of pixels from the top edge of the layout to the bottom edge of the clickable area.

To be sure that I specified values that are understood by the layout control, I found it easiest to use the layout control itself to view the values of X and Y. You can do this by adding a very simple line of code to the MouseMove event of the image as follows:

  1. With truck.alx open in the layout control, launch the Script Wizard.
  2. Select Image1's MouseMove event.
  3. Enter the following line of code in the event handler (see Figure 17.3):
    Figure 17.3 : The temporary event handler to display the X and Y mouse values.
    rem TextBox1.Text = "X=" & X & " Y=" & Y
    This displays the values of both X and Y as you move the mouse pointer around the screen.
  4. Save the layout.
  5. Open a new HTML document in the ActiveX Control Pad.
  6. Amend the <BODY> tag so that the background color is white.
  7. Add <CENTER> tags to the page.
  8. With the cursor between the open and close <CENTER> tags, select Add HTML Layout from the Edit menu.
  9. Choose truck.alx from the file dialog and click OK. The object definition for the layout control is automatically placed in your HTML document, as shown in Figure 17.4.
    Figure 17.4 : The new HTML document complete with layout object definition.
  10. Save the file as truck.htm, and run it with the browser. It should look like what you see in Figure 17.5.
    Figure 17.5 : Determining the clickable areas on the image.
  11. With the cursor at the top of a clickable area, make a note of the Y value; this is Y1.
  12. With the cursor at the bottom of a clickable area, make a note of the Y value; this is Y2.
  13. With the cursor at the left of a clickable area, make a note of the X value; this is X1.
  14. With the cursor at the right of a clickable area, make a note of the X value; this is X2.

You then create a table of values like the one shown in Table 17.1, which is your map.

Table 17.1. The X and Y coordinate values.

 
X1
Y1
X2
Y2
Area 1
50
29
154
92
Area 2
124
92
190
168
Area 3
375
10
434
96
Area 4
344
97
403
184

You are now ready to add the code that turns your image into an image map.

Adding MouseMove and MouseDown Code to the Image Map

The main functionality of any image map is the capability to click an area of the graphic and have that mouse click translated into an instruction to navigate to a different URL. However, the ActiveX Image control does not include a Click event. It does have a MouseDown event, and in reality, a Click event is the joining together of two other events-MouseDown and MouseUp. The MouseDown event is fired when the mouse button is pressed, which works just as well as a click for your purposes.

One thing that server-side image maps cannot do is track the mouse as it passes over the image. For this, you need a MouseMove event, which you will program to display relevant messages about the area of the image that the mouse is currently over.

  1. If it's not already there, load truck.alx into the layout control.
  2. Launch the Script Wizard.
  3. Go to the Image1 MouseMove event that you created earlier.
  4. Add the word rem to the start of the line you entered earlier. This means "remark" and instructs the VBScript compiler to ignore the line as executable code. You can obviously delete it if you want, but you might want to make further amendments later on.
  5. Add the following code to the event handler: 
If (InArea(x, y,  50, 29, 154, 92)=true) Then 
    TextBox1.Text = "Our routes, pick-ups, and drop-offs"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then 
    TextBox1.Text = "Meet the management team"
ElseIf (InArea(x, y,  375, 10, 434, 96)=true) Then 
    TextBox1.Text = "Our Rates.. the best in the business"
ElseIf (InArea(x, y,  344, 97, 403, 184)=true) Then 
    TextBox1.Text = "Job vacancies with Web Trucking"
Else 
    TextBox1.Text = "Welcome to the Web Trucking Web Site"
End If

    What's this little lot doing? Notice that each pair of lines is basically the same; only the numbers and the explicit text are changing.
    You are going to call a custom function, InArea, which you create shortly. InArea takes the actual values of X and Y that were passed from the MouseMove event. X and Y pinpoint the whereabouts of the mouse cursor. InArea is also passed the four coordinates that describe the clickable area. If InArea finds that X and Y are within the clickable area, the Text property of TextBox1 is changed to a particular description.
    Figure 17.6 shows what your finished MouseMove event handler should look like.
    Figure 17.6 : The MouseMove event handler.
  1. Now select the MouseDown event for Image1. Note that an image does not have an explicit OnClick or click event, which is no problem in this case because MouseDown passes the X and Y coordinates that you need to determine whether the mouse is within a clickable area. As the name suggests, MouseDown fires when the mouse button is pressed.
    Add the following code to the MouseDown event handler: 
If (InArea(x, y,  50, 29, 154, 92)=true) Then 
    Window.location.href = "truck2.html"
ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then 
    Window.location.href = "truck3.html"
ElseIf (InArea(x, y,  375, 10, 434, 96)=true) Then 
    Window.location.href = "truck1.html"
ElseIf (InArea(x, y,  344, 97, 403, 184)=true) Then 
    Window.location.href = "truck4.html"
End If

    Notice that the conditional statements are identical to those of the MouseMove event handler. This time, if the mouse is found to be within a clickable area, you change the href property of the Location object, thereby launching a new page, replicating the functionality of a hyperlink. Your MouseDown event handler should now resemble the one in Figure 17.7.
    Figure 17.7 : The completed MouseDown event handler.
  1. Now you need to create the custom function that determines whether the mouse cursor is within a clickable area. With your mouse in the right Actions pane, right-click and select New Procedure from the pop-up menu.
  2. Change the word Sub to Function and replace the default name of Procedure1 with InArea.
  3. After the word InArea, add the following argument list, which is the list of variables that you want passed into the function:
    (x, y, ax1, ay1, ax2, ay2)
  4. In the script window, enter the code for the custom function (shown in Figure 17.8), which is a straightforward one liner:
    Figure 17.8 : The InArea custom function.
    InArea = x>=ax1 AND x<=ax2 AND y>=ay1 AND y<=ay2
  5. Click OK, and the Script Wizard generates the required code in the truck.alx source file.
  6. Save the layout and try it with the browser.
  7. Run truck.htm with the browser. Remember that no amendments are necessary to the HTML file because all the functionality of the page is held within the .ALX file.

Let's look at the image map in action within the browser. Figure 17.9 shows that, as the mouse is moved around the image, the MouseMove event is fired, causing text to be displayed in the text box.

Figure 17.9 : As you pass the cursor over an area, the text changes.

As you move the cursor to another area of the image map, the text in the text box changes, as shown in Figure 17.10.

Figure 17.10: Move to another area of the image map, and the text changes.

Clicking on an area of the image map causes another page of the Web site to be loaded, as shown in Figure 17.11.

Figure 17.11: What happens when you click an area? You access other pages in the Web site.

Listing 17.1 contains the complete source code for the image map example, truck.alx.

Listing 17.1. The truck.alx code.
 
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Image1_MouseMove(Button, Shift, X, Y)
rem TextBox1.Text = "X=" & X & " Y=" & Y

  If (InArea(x, y,  50, 29, 154, 92)=true) Then 
      TextBox1.Text = "Our routes, pick-ups, and drop-offs"
  ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then 
      TextBox1.Text = "Meet the management team"
  ElseIf (InArea(x, y,  375, 10, 434, 96)=true) Then 
      TextBox1.Text = "Our Rates.. the best in the business"
  ElseIf (InArea(x, y,  344, 97, 403, 184)=true) Then 
      TextBox1.Text = "Job vacancies with Web Trucking"
  Else 
      TextBox1.Text = "Welcome to the Web Trucking Web Site"
  End If
end sub
Sub Image1_MouseDown(Button, Shift, X, Y)
  If (InArea(x, y,  50, 29, 154, 92)=true) Then 
      Window.location.href = "truck2.html"
  ElseIf (InArea(x, y, 124, 92, 190, 168)=true) Then 
      Window.location.href = "truck3.html"
  ElseIf (InArea(x, y,  375, 10, 434, 96)=true) Then 
      Window.location.href = "truck1.html"
  ElseIf (InArea(x, y,  344, 97, 403, 184)=true) Then 
      Window.location.href = "truck4.html"
  End If

end sub
Function InArea(x, y, ax1, ay1, ax2, ay2)
     InArea =  x>=ax1 AND x<=ax2 AND y>=ay1 AND y<=ay2
end function
-->
</SCRIPT>
<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:450pt;HEIGHT:254pt;">
    <OBJECT ID="Image1"
     CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF" 
STYLE="TOP:0pt;LEFT:0pt;WIDTH:450pt;HEIGHT:253pt;ZINDEX:0;">
        <PARAM NAME="PicturePath" VALUE="f:\llww\chapter17\truck.gif">
        <PARAM NAME="BorderStyle" VALUE="0">
        <PARAM NAME="SizeMode" VALUE="3">
        <PARAM NAME="Size" VALUE="15875;8925">
        <PARAM NAME="PictureAlignment" VALUE="0">
        <PARAM NAME="VariousPropertyBits" VALUE="19">
    </OBJECT>
    <OBJECT ID="TextBox1"
     CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002f3"
 STYLE="TOP:64pt;LEFT:195pt;WIDTH:146pt;HEIGHT:74pt;TABINDEX:0;ZINDEX:1;">
        <PARAM NAME="VariousPropertyBits" VALUE="2894088219">
        <PARAM NAME="ForeColor" VALUE="4227327">
        <PARAM NAME="Size" VALUE="5151;2611">
        <PARAM NAME="Value" VALUE="Welcome to the Web Trucking Inc. Web Site">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="240">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
</DIV>

Workshop Wrap-Up

Creating image maps with VBScript and the HTML layout control is very straightforward and enables you to use techniques that are not available elsewhere. The key is to accurately specify the boundaries of each clickable area, ensuring that they do not overlap.

Next Steps

Now look at these other chapters about the HTML layout control and interacting with the browser itself:

Q&A

Q:
Can any graphic be used as an image map?
A:
Yes. The format and type of graphic are unimportant. If you can display it through the image control, you can use it as an image map.
Q:
I tried using my exisiting coordinate table with my image map in VBScript with the layout control as described in this chapter, and it didn't work properly. Why is that?
A:
The measurement system of the layout control is different from the normal HTML page that your current coordinates relate to. Therefore, you must re-measure your X and Y coordinates.